<template>
  <div>
    <button @click="up">updateName</button>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
    <h2>{{ gender }}</h2>
  </div>
</template>

<script>
import {mapState, useStore} from 'vuex'
import {computed} from 'vue'
export default {
  setup() {
    const store = useStore()
    const storeState = {}
    const storeStateFns = mapState(['name','age','gender'])
    Object.keys(storeStateFns).forEach( fnKey => {
      const fn = storeStateFns[fnKey].bind({$store:store})
      storeState[fnKey] = computed(fn)
    })
    return {
      ...storeState
    }
  },
};
</script>

<style lang="scss" scoped>
</style>